import {InputNumber, Button, message} from 'antd'
import React, {useEffect, useState} from 'react'
import {history} from 'umi'
import cardStyles from '../index.less'
import {
	vehicleReturnInspectionCharge,
	orderArrearsSum,
	residualAbatementList,
	postTransfer,
} from '@/service/order/index'
import styles from './index.less'
import {getList} from '@/service/configuration/index'
import {GlobalState} from '@/models/global'
import ReturnCar from '../list/columns/returnCar'
import TransferCar from '../list/columns/transferCar'

export interface FixedBarProps {
	global: GlobalState
	dispatch: any
	location: any
}
function DeductionExpenses(props: any) {
	const {info, title, btnTitle, datas, time, orderId} = props
	const [deduction, setDeduction] = useState([]) // 扣款列表
	const [deductionAll, setdeductionAll] = useState(0) // 扣款总额
	const [reduction, setReduction] = useState([]) // 减免列表
	const [reductionAll, setreductionAll] = useState(0) // 减免总额
	const [allNum, setAllNum] = useState(0)
	const [loading, setLoading] = useState(false)
	const [allNumState, setAllNumState] = useState('1')
	const [importReturnCarItem, setImportReturnCarItem] = useState(false) // 导入退车费用项
	const [importTransferCarItem, setImportTransferCarItem] = useState(false) // 导入过户费用项
	const calculation = () => {
		if (deductionAll >= reductionAll) {
			setAllNumState('1')
			setAllNum(Number((deductionAll - reductionAll).toFixed(2)))
		} else {
			setAllNumState('2')
			setAllNum(Number((reductionAll - deductionAll).toFixed(2)))
		}
	} // 计算需补交还是退
	useEffect(() => {
		calculation()
	}, [deductionAll, reductionAll, allNum])
	useEffect(() => {
		let num1 = 0 // 欠款
		let num2 = 0 // 剩余账款
		const data = {
			orderNo: orderId,
		}
		if (orderId) {
			const data1 = {
				orderNo: orderId,
				retuenTime: String(time),
			}
			orderArrearsSum(data1).then((res: any) => {
				if (res?.success) {
					if (res?.data?.uncollectedAmount === '0.00') {
						num1 = 0
					} else {
						num1 = Number(res?.data?.uncollectedAmount)
					}
					setdeductionAll(num1)
					calculation()
					const list1: any = []
					const obj = {
						title: '欠租',
						value: num1,
						type: 1,
						statue: '1',
					}
					list1.push(obj)
					const list3: any = {
						expenseItemType: 1,
						current: 1,
						size: 99999,
						status: 2,
					}
					if (title === '过户结算信息') {
						list3.businessType = 3
					} else {
						list3.businessType = 1
					}
					getList(list3).then((res1: any) => {
						if (res1?.success) {
							res1?.data?.records.forEach((res2: any) => {
								const obj1 = {
									title: '',
									value: '',
									type: 2,
								}
								obj1.title = res2?.expenseItemName
								list1.push(obj1)
							})
							setDeduction(list1)
						}
					})
				}
			})
		}

		residualAbatementList(data).then((res: any) => {
			if (res?.success) {
				const list = [...res.data]
				list?.forEach((res1: any, index: number) => {
					list[index].surplusAmount = Number(res1.surplusAmount)
					num2 += res1.surplusAmount
				})
				setreductionAll(num2)
				calculation()
				const list2: any = []
				const obj2 = {
					title: '减免余额',
					value: num2,
					type: 1,
					statue: '1',
				}
				list2.push(obj2)
				const list4: any = {
					expenseItemType: 2,
					current: 1,
					size: 99999,
					status: 2,
				}
				if (title === '过户结算信息') {
					list4.businessType = 3
				} else {
					list4.businessType = 1
				}
				getList(list4).then((res4: any) => {
					if (res4?.success) {
						res4?.data?.records.forEach((res3: any) => {
							const obj1 = {
								title: '',
								value: '',
								type: 2,
							}
							obj1.title = res3?.expenseItemName
							list2.push(obj1)
						})
						setReduction(list2)
					}
				})
			}
		})
	}, [orderId, time])
	const onFinish = () => {
		setLoading(true)
		const obj: any = {
			orderCarId: info,
			collectFeeList: [],
			deductionFeeList: [],
		}
		deduction?.forEach((res: any) => {
			const obj1 = {
				feeItemName: res?.title,
				feeItemAmount: res?.value,
				feeManipuility: res?.type,
			}
			obj.collectFeeList.push(obj1)
		})
		reduction?.forEach((res: any) => {
			const obj2: any = {
				feeItemName: res?.title,
				feeItemAmount: res?.value,
				feeManipuility: res?.type,
			}
			obj.deductionFeeList.push(obj2)
		})
		if (title === '过户结算信息') {
			obj.estimatedTime = datas?.estimatedTime
			obj.applyRemark = datas?.applyRemark
			delete obj.orderCarId
			postTransfer(info, obj).then((res: any) => {
				if (res.success) {
					setLoading(false)
					history.goBack()
				} else {
					setLoading(false)
				}
			})
		} else {
			vehicleReturnInspectionCharge(obj).then((res) => {
				if (res.success) {
					setLoading(false)
					history.goBack()
				} else {
					setLoading(false)
				}
			})
		}
	}
	// 扣款输入
	const deductionchange = (value: any, text: any) => {
		if (text) {
			const data = /^(?!0+(?:.0+)?$)(?:[0-9]\d*|0)(?:.\d{1,2})?$/
			if (data.test(text)) {
				deduction?.forEach((res: any) => {
					if (res?.title === value?.title) {
						res.value = text.toString()
					}
				})
				setDeduction(deduction)
				let all = 0
				deduction?.forEach((res: any) => {
					all = Number(res?.value) + all
				})
				const all1 = Number(all.toFixed(2))
				setdeductionAll(all1)
				calculation()
			} else {
				message.error('请输入数字，最多2位小数')
			}
		} else {
			deduction?.forEach((res: any) => {
				if (res?.title === value?.title) {
					res.value = ''
				}
			})
			setDeduction(deduction)
			let all = 0
			deduction?.forEach((res: any) => {
				all = Number(res?.value) + all
			})
			setdeductionAll(all)
			calculation()
		}
	}
	// 减免输入
	const reductionChange = (value: any, text: any) => {
		if (text) {
			const data = /^(?!0+(?:.0+)?$)(?:[0-9]\d*|0)(?:.\d{1,2})?$/
			if (data.test(text)) {
				reduction?.forEach((res: any) => {
					if (res?.title === value?.title) {
						res.value = text
					}
				})
				setReduction(reduction)
				let all = 0
				reduction?.forEach((res: any) => {
					all = Number(res?.value) + all
				})
				const all2 = Number(all.toFixed(2))
				setreductionAll(all2)
				calculation()
			} else {
				message.error('请输入数字，最多2位小数')
			}
		} else {
			reduction?.forEach((res: any) => {
				if (res?.title === value?.title) {
					res.value = ''
				}
			})
			setReduction(reduction)
			let all = 0
			reduction?.forEach((res: any) => {
				all = Number(res?.value) + all
			})
			setreductionAll(all)
			calculation()
		}
	}
	// 取消
	const onCancel = () => {
		history.goBack()
	}
	// 批量导入
	const btnClick = () => {
		if (title === '过户结算信息') {
			setImportTransferCarItem(true)
		} else if (title === '退车结算信息') {
			setImportReturnCarItem(true)
		}
	}
	// 关闭弹框回调
	const sunChange = (value: any) => {
		if (value) {
			if (title === '过户结算信息') {
				setImportTransferCarItem(false)
			} else if (title === '退车结算信息') {
				setImportReturnCarItem(false)
			}
			history.push('/order/list')
		}
	}

	return (
		<div className={cardStyles.card}>
			<div className={cardStyles.title}>
				<span className={styles.title}>{title}</span>
				<Button type="primary" onClick={btnClick}>
					{btnTitle}
				</Button>
				<span className={styles.value}>
					{allNumState === '1'
						? '需要客户补缴金额/元'
						: '需要退还客户金额/元'}
					:{allNum}
				</span>
			</div>
			<div className={styles.box}>
				<p className={styles.title}>扣款费用项</p>
				<div className={styles.line}>
					{deduction?.map((res: any) => (
						<div className={styles.line_box}>
							<p className={styles.text}>{res?.title}:</p>
							<p className={styles.value}>
								<InputNumber
									onChange={(e) => deductionchange(res, e)}
									value={res?.value}
									disabled={res.statue}
									step="0.01"
								/>
							</p>
						</div>
					))}
				</div>
				<div className={styles.all}>
					<span>合计：</span>
					<span>{deductionAll}</span>
				</div>
			</div>

			<div className={styles.box}>
				<p className={styles.title}>减免费用项</p>
				<div className={styles.line}>
					{reduction?.map((res: any) => (
						<div className={styles.line_box}>
							<p className={styles.text}>{res?.title}:</p>
							<p className={styles.value}>
								<InputNumber
									onChange={(text) =>
										reductionChange(res, text)
									}
									value={res?.value}
									disabled={res.statue}
									step="0.01"
								/>
							</p>
						</div>
					))}
				</div>
				<div className={styles.all}>
					<span>合计：</span>
					<span>{reductionAll}</span>
				</div>
			</div>
			<div className={styles.foot}>
				<Button
					shape="round"
					onClick={onCancel}
					style={{marginRight: '8px'}}>
					取消
				</Button>
				<Button
					shape="round"
					type="primary"
					htmlType="submit"
					onClick={onFinish}
					loading={loading}>
					提交
				</Button>
			</div>
			{/* 导入退车费用项 */}
			<ReturnCar info={importReturnCarItem} sunchange={sunChange} />
			{/* 导入过户费用项 */}
			<TransferCar info={importTransferCarItem} sunchange={sunChange} />
		</div>
	)
}
export default DeductionExpenses
